<!-- container box 嵌套 box -->
<template>
  <div class="nesting-component box-footer">
    <div class="nesting-main">
      <div class="component-list">
        <el-scrollbar style="height:100%;">
          <div class="icon-compontent-list">
            <ul class="clearfix">
              <li v-for="comp in componentTypes" :key="comp.id" :class="{selected: componentType === comp.id}" @click="chooseComponentType(comp.id, comp.type)">
                <div class="item">
                    <div class="icon"><i :class="['icon-compontent', 'icon-compontent' + comp.id]"></i></div>
                    <div class="name">{{comp.name}}</div>
                </div>
              </li>
            </ul>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <!-- <div class="btn-footer">
       <el-button @click.stop="addComponent" type="primary" size="mini">
          确定
        </el-button>
    </div> -->
  </div>
</template>

<script>
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
export default {
  props: {
    // 调用方法所需参数
    tmpContainerId: {
      type: String
    },
    // 显示组件列表数据
    componentTypes: {
      type: Array
    },
    // 组件数据
    component: {
      type: Object
    },
    // 关闭整个容器编辑弹窗
    close: {
      type: Function
    }
  },
  computed: {
    ...mapState([
      'design'
    ])
  },
  data () {
    return {
      formLabelWidth: '120px',
      componentType: 0,
      componentTypeName: ''
    }
  },
  methods: {
    chooseComponentType (comId, comType) {
      if (comId === this.componentType) {
        return
      }
      this.componentType = comId
      this.componentTypeName = comType
      this.addComponent()
    },
    // 添加 component 到容器组件中
    addComponent () {
      BackendjsFunctions.addComponentParams(this.tmpContainerId, this.componentTypeName)
      this.close()
    }
  }
}
</script>

<style scoped lang="scss">
.nesting-component .component-list {
  height: 180px;
}
.nesting-component /deep/ .component-list .el-scrollbar__wrap {
  overflow-x: hidden;
}
.icon-compontent-list {
  overflow: hidden;
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: block;
    margin: 0 -7px;
    li {
      padding: 0;
      margin: 0;
      list-style: none;
      float: left;
      margin-bottom: 20px;
      width: 20%;
      text-align: center;
      .item {
        margin: 0 7px;
        cursor: pointer;
        &:hover {
          color: #258FFB;
        }
        .icon {
          margin-bottom: 3px;
        }
        .name {
          line-height: 1.5;
        }
      }
      &.selected .item {
        color: #258FFB;
      }
      .icon-compontent {
        width: 60px;
        height: 40px;
        display: inline-block;
        background: url(~@/assets/images/icon_compontents.png) no-repeat;
      }
      .icon-compontent1 {
        background-position: 0 0;
      }
      .icon-compontent2 {
        background-position: -60px 0;
      }
      .icon-compontent3 {
        background-position: -120px 0;
      }
      .icon-compontent4 {
        background-position: -180px 0;
      }
      .icon-compontent5 {
        background-position: -240px 0;
      }
      .icon-compontent6 {
        background-position: 0 -40px;
      }
      .icon-compontent7 {
        background-position: -60px -40px;
      }
      .icon-compontent8 {
        background-position: -120px -40px;
      }
      .icon-compontent9 {
        background-position: -180px -40px;
      }
      .icon-compontent10 {
        background-position: -240px -40px;
      }
      .icon-compontent11 {
        background-position: 0 -80px;
      }
      .icon-compontent12 {
        background-position: -60px -80px;
      }
      .icon-compontent13 {
        background-position: -120px -80px;
      }
      .icon-compontent14 {
        background-position: -180px -80px;
      }
      .icon-compontent15 {
        background-position: -240px -80px;
      }
      .icon-compontent16 {
        background-position: 0 -120px;
      }
      .icon-compontent17 {
        background-position: -60px -120px;
      }
      .icon-compontent18 {
        background-position: -120px -120px;
      }
      .icon-compontent29 {
        background-position: -180px -200px;
      }
    }
  }
}
.icon-compontent-list li .item:hover .icon-compontent,.icon-compontent-list li.selected .icon-compontent  {
  background-image: url(~@/assets/images/icon_compontents_hover.png)
}
</style>
